<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include/public/Header::head('员工申请')" >
<body>
<div class="row login_container" id="login_container">

    <div class="col-sm-7 col_photo">
        <a style="position: absolute;top: 0px;left: 20px;font-size: 50px;" href="/">
            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"/>
            </svg>
        </a>
        <img class="login_pic" th:src="@{/pic/public/register.png}">
    </div>
    <div class="col-sm-5 col_form">
        <div class="form">
            <h1 class="form_title">员工申请</h1>
            <div class="form-horizontal">
                <div class="form-group">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="name_name"><span class="iconfont icon-zhanghao"></span></span>
                        </div>
                        <input type="text" class="form-control" id="name" placeholder="请输入你的姓名" v-model.trim="user.name" aria-describedby="name_name">
                    </div>

                    <div class="form-select form-select-sex">
                        <span>性别</span>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" name="sex" type="radio" id="sex-man" value="1" v-model:trim="user.gender" @change="getRadioVal">
                            <label class="form-check-label" for="sex-man">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" name="sex" type="radio" id="sex-woman" value="0" v-model:trim="user.gender" @change="getRadioVal">
                            <label class="form-check-label" for="sex-woman">女</label>
                        </div>
                    </div>
                    <div class="form-select form-select-job" v-model.trim="user.baseInfo.position">
                        <span>职位</span>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" name="job" type="radio" id="job-courier" value="快递员" v-model:trim="user.baseInfo.position">
                            <label class="form-check-label" for="job-courier">快递员</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" name="job" type="radio" id="job-account" value="财务" v-model:trim="user.baseInfo.position">
                            <label class="form-check-label" for="job-account">财务</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" name="job" type="radio" id="job-worker" value="内勤" v-model:trim="user.baseInfo.position">
                            <label class="form-check-label" for="job-worker">内勤</label>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="phone_name"><span class="iconfont icon-mima"></span></span>
                        </div>
                        <input type="tel" class="form-control" id="phone" placeholder="请输入你的手机号" v-model.trim="user.phone" aria-describedby="phone_name">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="pwd_name"><span class="iconfont icon-mima"></span></span>
                        </div>
                        <input type="password" class="form-control" id="pwd" placeholder="请输入你的密码" v-model.trim="user.password" aria-describedby="pwd_name">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="pwd_name_again"><span class="iconfont icon-mima"></span></span>
                        </div>
                        <input type="password" class="form-control" id="pwd_again" placeholder="请再次输入你的密码" v-model.trim="user.password_again" aria-describedby="pwd_name_again">
                    </div>
                </div>
                <button class="btn btn-lg btn-info form-control" @click="register">注册</button>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    $(function(){
        var data4Vue = {
            uri: 'register',
            radioVal:'',
            user:{name:'',password:'',baseInfo: {position:'快递员'},gender:1},
        };

        //ViewModel
        var vue = new Vue({
            el: '#login_container',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            },
            methods: {
                getRadioVal() {
                    console.log(this.user.gender);
                },
                register:function (){
                    console.log(this.user)
                    if(this.user.name==''||this.user.name.length==0){
                        alert("请输入您的姓名！")
                        return
                    }
                    if(this.user.phone.length!=11){
                        alert("请输入正确的手机号！")
                        return
                    }
                    if(this.user.password.length==0||this.user.password==''){
                        alert("请输入你的密码！")
                        return
                    }
                    if(this.user.password!=this.user.password_again){
                        alert("两次密码不一致，请重新输入！")
                        return
                    }
                    let bid=0;
                    switch(this.user.baseInfo.position){
                        case "快递员":
                            bid+=105;
                            break;
                        case "财务":
                            bid+=205;
                            break;
                        case "内勤":
                            bid+=305;
                            break;
                    }
                    let url=this.uri;
                    vue.user.bid=bid;
                    axios.post(url,vue.user).then(function(response) {
                        if(response.data.code==0){
                            alert("注册成功！请登录！")
                            location.href = "/"
                        }else {
                            alert("注册失败！请重新注册！")
                        }
                    })
                }
            }
        });
    });
</script>
</html>
